<template>
  <div class="user-list">
    <h3>用户列表</h3>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>Email</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.email }}</td>
          <td>
            <button @click="resetPassword(user.id)">重置密码</button>
            <button @click="removeUser(user.id)">移除用户</button>
            <button @click="addToBlacklist(user.id)">加入黑名单</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: 'Users',
  data() {
    return {
      users: [
        { id: 1, username: 'user1', email: 'user1@example.com' },
        { id: 2, username: 'user2', email: 'user2@example.com' }
      ]
    }
  },
  methods: {
    resetPassword(id) {
      alert(`重置用户 ${id} 的密码`)
    },
    removeUser(id) {
      this.users = this.users.filter(u => u.id !== id)
    },
    addToBlacklist(id) {
      alert(`将用户 ${id} 加入黑名单`)
    }
  }
}
</script>